<template>
  <view class="content pt-2">
    <!-- 导航菜单 -->
    <div class="w-screen flex justify-center flex-col items-center gap-2">
<!--      <div class="flex">-->
        <span class="flex text-4xl text-red-600 font-bold">龙吟天音通脉透穴</span>
        <span class="flex">谢超（神霄派天乙门幽超）</span>
        <n-radio-group class="flex" v-model:value="currentView">
          <n-radio-button
              v-for="item in menuItems"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          />
        </n-radio-group>
<!--      </div>-->
    </div>
    <!-- 内容区域 -->
    <view class="view-container">
      <!-- 频率选择 -->
      <FrequencySelect v-if="currentView === 'ping_lv_xuan_ze'"/>
      <!-- 测试工具 -->
      <TestTools v-if="currentView === 'ce_shi_gong_ju'"/>
      <!-- 频率配方 -->
      <FrequencyFormula v-if="currentView === 'pin_lv_pei_fang'"/>
      <!-- 使用说明 -->
      <UserGuide v-if="currentView === 'shi_yong_shuo_ming'"/>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import FrequencySelect from '../frequency-select/index.vue'
import TestTools from '../test-tools/index.vue'
import FrequencyFormula from '../frequency-formula/index.vue'
import UserGuide from '../user-guide/index.vue'

// 菜单项配置
const menuItems = [
  {
    value: 'ping_lv_xuan_ze',
    label: '频率选择'
  },
  {
    value: 'ce_shi_gong_ju',
    label: '测试工具'
  },
  {
    value: 'pin_lv_pei_fang',
    label: '频率配方'
  },
  {
    value: 'shi_yong_shuo_ming',
    label: '使用说明'
  }
];

// 当前选中的视图
const currentView = ref('ping_lv_xuan_ze');
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.view-container {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}
</style>
